<template>

  <main class="home">
    <!-- 主视觉区 -->
  
    <section class="hero">
    <!-- 仅移动端时渲染该图像块 -->
<div v-if="isMobile" class="mobile-hero-image">
  <img 
    src="@/assets/AdobeStock_280540689.jpg" 
    alt="Corporate Image"
    class="mobile-image"
  >
</div>

      <div class="content-wrapper">
        <!-- 标题组 -->
        <div class="title-container">
          <h1 class="main-title" v-html="homeData.title">
            
          </h1>
          <p class="english-subtitle" v-html="homeData.subtitle">
          </p>
        </div>

        <!-- 公司简介 -->
        <div class="description-container">
          <p class="japanese-text" v-html="homeData.content ? homeData.content.replace(/&lt;br&gt;/g, '<br>') : ''">
           </p>
          <div class="corporate-info">
            <p class="company-name">Sakura Pharma Co., Ltd.</p>
          </div>
        </div>
      </div>

      <!-- 背景图片 -->
      <!-- 仅非移动端显示剪切背景图 -->
<div v-if="!isMobile" class="image-overlay">
  <img 
  :src="homeData.thumbnail" 
    alt="Corporate Image"
    class="background-image"
  >
</div>


    </section>

  </main>
</template>

<script>
import { getHomeData } from '@/api'  // 假设存在获取首页数据的接口

export default {
  name: 'HomePage',
  data() {
    return {
      isMobile: false,
      homeData: {
        title: "",
        thumbnail: "",
        subtitle: "",
        content: "" 
      }
    };
  },
  async mounted() {
    this.checkIfMobile();
    window.addEventListener('resize', this.checkIfMobile);
    
    try {
    const data = await getHomeData();
    this.homeData = {
      ...data.rows[0],
      content: data.rows[0].content.replace(/&lt;br&gt;/g, '<br>')
    };
  } catch (error) {
    console.error('Error fetching about data:', error);
  }
  },
  beforeUnmount() {
    window.removeEventListener('resize', this.checkIfMobile);
  },
  methods: {
    checkIfMobile() {
      this.isMobile = window.innerWidth <= 768;
    }
  }
}

</script>

<style scoped>
/* 基础样式 */
.home {
  font-family: 'Noto Sans JP', 'Hiragino Sans', sans-serif;
  color: #2A2A2A;
  overflow: hidden;
}


/* 主视觉区 */
.hero {
  position: relative;
  height: 100vh;
  display: flex;
  align-items: center;
}

/* 内容包装 */
.content-wrapper {
  position: relative;
  z-index: 2;
  width: 50%;
  padding-left: 10%;
}

/* 标题样式 */
.title-container {
  margin-bottom: 3rem;
}

.main-title {
  font-size: 3rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.1em;
  margin: 0 1 1.5rem 0;
  font-family: "HiraMinProN-W3", "Hiragino Mincho Pro", serif; 
  background: linear-gradient(45deg, #2A2A2A 70%, #6B486B);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.main-title span {
  font-family: "HiraMinProN-W3", "Hiragino Mincho Pro", serif; 
  background: linear-gradient(45deg, #2A2A2A 70%, #6B486B);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.english-subtitle {
  font-size: 1.1rem;
  color: #666;
  font-style: italic;
  letter-spacing: 0.05em;
  margin: 0;
}

/* 公司简介 */
.description-container {
  background: rgba(255, 255, 255, 0.9);
  padding: 2rem;
  border-left: 4px solid #8E44AD;
  box-shadow: 8px 8px 20px rgba(0, 0, 0, 0.08);
}

.japanese-text {
  font-size: 0.95rem;
  line-height: 1.8;
  letter-spacing: 0.08em;
  margin: 0 0 1.5rem 0;
}

.corporate-info {
  border-top: 1px solid #DDD;
  padding-top: 1rem;
}

.establishment {
  font-size: 0.9rem;
  color: #666;
  margin: 0 0 0.5rem 0;
}

.company-name {
  font-size: 1.1rem;
  font-weight: 500;
  color: #8E44AD;
  margin: 0;
}

/* 背景图片 */
.image-overlay {
  position: absolute;
  right: -10%;
  top: 0;
  width: 60%;
  height: 100%;
  overflow: hidden;
}

.background-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left center;
  filter: grayscale(20%) contrast(110%);
  clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
}



.nav-item {
  color: #444;
  text-decoration: none;
  font-size: 0.9rem;
  letter-spacing: 0.1em;
  transition: color 0.3s ease;
}

.nav-item:hover {
  color: #8E44AD;
}

/* 响应式设计 */
@media (max-width: 1024px) {
  .content-wrapper {
    width: 65%;
    padding-left: 5%;
  }

  .main-title {
    font-size: 2.4rem;
  }
}

@media (max-width: 768px) {
  .home {
    height: 88vh;
    display: flex;
    flex-direction: column;
  }

  .hero {
    padding-top: 0;
    flex-direction: column;
    display: grid;
    
  background: linear-gradient(to bottom, #FFF5E1, #FDE7F3);
  }

  /* 移动端独有图片显示 */
  .image-overlay {
    display: none;
  }

  .mobile-hero-image {
    display: block;
    width: 100%;
    height: 125%;
    overflow: hidden;
  }

  .mobile-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transform: scale(2.1);
  }

  .content-wrapper {
    width: 100%;
    padding: 0rem;
  }

  .description-container {
    border-left: none;
    padding: 0rem;
    background: transparent;
    box-shadow: none;
  }

  .title-container {
    margin-bottom: 1rem;
  }

  .main-title {
    font-size: 1.6rem;
    line-height: normal;
  }

  .english-subtitle {
    font-size: 0.8rem;
  }
  
  .corporate-info {
    display: none;
  }

  .japanese-text {
    font-size: 1rem;
    line-height: 1.6;
    letter-spacing: 0;
    margin: 0 0 4.5rem 0;
  }
  
  .home {
    color: #444;
  }
}


</style>



